<template>
  <div id="rose-chart">
    <div class="rose-chart-title">色差检测情况</div>
    <dv-charts :option="option" />
  </div>
</template>

<script setup lang="ts" name="RoseChart">
import { toRefs, PropType, ref, reactive } from 'vue'

const props = defineProps({
  tileData: {
    type: Object,
    default: {}
  }
})
let { tileData } = toRefs(props)
const chromatismObjData = tileData.value.chromatismObjData
let option = reactive({
  series: [
    {
      type: 'pie',
      // radius: '50%',
      radius: ['40%', '70%'],
      legend: {
        data: ['无色差', '微小色差', '大色差']
      },
      roseSort: false,
      data: [
        { name: '无色差', value: chromatismObjData.non },
        { name: '微小色差', value: chromatismObjData.small },
        { name: '大色差', value: chromatismObjData.big }
      ],
      insideLabel: {
        show: false
      },
      outsideLabel: {
        formatter: '{name} {value} 块',
        labelLineEndLength: 10,
        style: {
          fill: '#FFF',
          fontSize: 20
        },
        labelLineStyle: {
          stroke: '#fff'
        }
      }
    }
  ],
  color: ['#67C23A', '#E6A23C', '#F56C6C']
})
</script>

<style scoped>
#rose-chart {
  width: 38%;
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
}
.rose-chart-title {
  height: 50px;
  font-weight: bold;
  text-indent: 20px;
  font-size: 24px;
  display: flex;
  align-items: center;
}

.dv-charts-container {
  height: calc(100% - 50px);
}
</style>
